<script lang="ts" setup>
import { computed, onBeforeUnmount, onMounted, ref } from "vue";
import { formatTime } from "@/utils/time";
import { type } from "os";
const time = ref<string>("");

let lastTime = performance.now();
let timerId: any = ref(null);

const props = defineProps({
  height: {
    type: String,
    default: "",
  },
  zIndex: {
    type: Number,
    default: 9,
  },
});

const mainStyle = computed(() => {
  let styles: any = {
    height: props.height,
    "z-index": props.zIndex,
  };
  let styleStr = "";
  for (const key in styles) {
    let value = styles[key];
    if (key && value) {
      styleStr += `${key}:${styles[key]};`;
    }
  }
  return styleStr;
});

const updateTime = () => {
  const now = performance.now();
  const nowDate = new Date();
  const deltaTime = now - lastTime;
  if (deltaTime >= 1000) {
    // 更新时间
    time.value = formatTime(nowDate);
    lastTime = now;
  }
  // 计算剩余时间
  const remainingTime = 1000 - (deltaTime % 1000);
  timerId.value = setTimeout(updateTime, remainingTime);
};

const getDateValue = (type: string, index: number) => {
  index = index - 1;
  try {
    if (type == "year") {
      let year = time.value.split(" ")[0].split("-")[0];
      return year[index];
    } else if (type == "month") {
      let month = time.value.split(" ")[0].split("-")[1];
      return month[index];
    } else if (type == "day") {
      let day = time.value.split(" ")[0].split("-")[2];
      return day[index];
    } else if (type == "hour") {
      let hour = time.value.split(" ")[1].split(":")[0];
      return hour[index];
    } else if (type == "minute") {
      let minute = time.value.split(" ")[1].split(":")[1];
      return minute[index];
    } else if (type == "second") {
      let second = time.value.split(" ")[1].split(":")[2];
      return second[index];
    }
  } catch (e) {
    console.log("getDateValue-ERR\r\n", e);
    return 0;
  }
  return 0;
};

onMounted(() => {
  // 开始定时器
  timerId.value = setTimeout(updateTime, 1000);
});

onBeforeUnmount(() => {
  if (timerId.value) {
    clearTimeout(timerId.value);
    timerId.value = null;
  }
});
</script>

<template>
  <div class="comp-time-view" :style="mainStyle">
    <div v-for="yearIndex in 4" class="digit years" :key="yearIndex" :data-value="getDateValue('year',yearIndex)">
      <div class="segment"></div>
      <div class="segment"></div>
      <div class="segment"></div>
      <div class="segment"></div>
      <div class="segment"></div>
      <div class="segment"></div>
      <div class="segment"></div>
    </div>
    <div class="separators date">
      <div class="separator"></div>
    </div>
    <div v-for="monthIndex in 2" class="digit months" :key="monthIndex" :data-value="getDateValue('month',monthIndex)">
      <div class="segment"></div>
      <div class="segment"></div>
      <div class="segment"></div>
      <div class="segment"></div>
      <div class="segment"></div>
      <div class="segment"></div>
      <div class="segment"></div>
    </div>
    <div class="separators date">
      <div class="separator"></div>
    </div>
    <div v-for="dayIndex in 2" class="digit days" :key="dayIndex" :data-value="getDateValue('month',dayIndex)">
      <div class="segment"></div>
      <div class="segment"></div>
      <div class="segment"></div>
      <div class="segment"></div>
      <div class="segment"></div>
      <div class="segment"></div>
      <div class="segment"></div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.comp-time-view {
  box-sizing: border-box;
  padding-right: 3vw;
  padding-top: 0.2vw;
  position: absolute;
  right: 0;
  top: 0;
  font-size: 1vw;
  min-width: 20vw;
}

.digit {
  width: 3vw;
  height: 4vw;
  margin: 0 5px;
  position: relative;
  display: inline-block;
}

.digit .segment {
  background: #fff;
  border-radius: 5px;
  position: absolute;
  opacity: 0.15;
  transition: opacity 0.2s;
  -webkit-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
}

.digit .segment.on,
.separator {
  opacity: 1;
  box-shadow: 0 0 50px rgba(255, 0, 0, 0.7);
  transition: opacity 0s;
  -webkit-transition: opacity 0s;
  -ms-transition: opacity 0s;
  -moz-transition: opacity 0s;
  -o-transition: opacity 0s;
}

.separators {
  width: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.separator {
  width: 20px;
  height: 20px;
  background: #c00;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  top: -90px;
}

$padding: 0.8vw;
$lineWidth: 4px;

.digit .segment:nth-child(1) {
  top: calc($padding);
  left: calc($padding * 2);
  right: calc($padding * 2);
  height: $lineWidth;
}

.digit .segment:nth-child(2) {
  top: calc($padding * 3 / 2);
  right: calc($padding * 4 / 3);
  width: $lineWidth;
  height: calc(50% - $padding * 2);
}

.digit .segment:nth-child(3) {
  bottom: calc($padding * 3 / 2);
  right: calc($padding * 4 / 3);
  width: $lineWidth;
  height: calc(50% - $padding * 2);
}

.digit .segment:nth-child(4) {
  bottom: 10px;
  right: 20px;
  height: 4px;
  left: 20px;
}

.digit .segment:nth-child(5) {
  bottom: 20px;
  left: 10px;
  width: 4px;
  height: calc(50% - 25px);
}

.digit .segment:nth-child(6) {
  top: 20px;
  left: 10px;
  width: 4px;
  height: 75px;
  height: calc(50% - 25px);
}

.digit .segment:nth-child(7) {
  bottom: 95px;
  bottom: calc(50% - 5px);
  right: 20px;
  left: 20px;
  height: 4px;
}
</style>